const bar = {
    name: 'bar',
    functional:true,
    render(h) {
        return h('h2', {
            style: {
                color: 'hotpink'
            }
        }, 'this is a Bar component!');
    },
}
const foo = {
    name: "foo",
    functional:true,
    render(h) {
        return h('h2', {
            style: {
                color: 'pink'
            }
        }, 'this is a Foo component!');
    },
}

const example = {
    name: 'example',
    props:{
        ok:{
            type:Boolean,
            default:true
        }
    },
    render(h) {
        if(this.ok){
            return h(foo)
        }else{
            return h(bar)
        }
    },
}


new Vue({
    el: "#app",
    components: {
        // foo,
        // bar
        example
    },
    data() {
        return {
            ok: true
        }
    },
    methods: {
        switchOk () {
            this.ok = !this.ok;
        }
    },
})